<template>
	<view class="goods">
		<!-- 顶部固定栏 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @click="yun"></view>
			<view class="titname"> {{goodList.name}} </view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 轮播图 -->
		<swiper class="swiper" autoplay interval="3000" indicator-dots indicator-color="rgba(0, 0, 0, .5)"
			indicator-active-color="#8c8c8c">
			<swiper-item class="swiperItem" v-for="item in goodList.skuList" :key="item.id">
				<image :src="item.pic" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 收藏按钮 -->
		<view class="shoucang" @click="shoucang">
			<view class="iconfont icon-shoucang icon" :class="sho == true?'red':'' "></view>
		</view>
		<!-- 产品价格 -->
		<view class="pricrss">
			<view class="titller">
				<view class="price">
					￥
					<strong>{{goodList.price}}</strong>
					.00
				</view>
				<view class="konbai">

				</view>
				<view class="note">
					{{goodList.note}}
				</view>
			</view>
			<view class="namess">
				{{goodList.name}}
			</view>
			<view class="description">
				{{goodList.description}}
			</view>
		</view>
		<!-- 产品详情展示 -->
		<view class="shelft">
			<mp-html :tag-style="obj" :content="goodList.detailMobileHtml" />
		</view>
		<view class="wizhi"></view>
		<!-- 产品底部固定栏 -->
		<view class="base">
			<view class="kefu">
				<image src="../../static/icons/客服.png" mode=""></image>
			</view>
			<view class="cart">
				<view class="wen" @click="tianjia(1)">
					添加到购物车
				</view>
				<view class="wen two" @click="tianjia(2)">
					立即购买
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view @tap="guanbi" v-show="shoMoke" class="moke" @touchmove.stop.prevent>
			<view @tap.stop class="mokeBox">
				<view class="goodsName">
					<view class="img">
						<image :src="goodList.pic" mode=""></image>
					</view>
					<view class="shonamesed">
						<view class="shang">
							{{goodList.name}}
						</view>
						<view class="xia">
							商品数量:
							{{shoNum}}
						</view>
					</view>
				</view>
				<view class="goodsXuanZhe">
					商品选择
					<view class="box">
						<view @click="picture(item.id)" :class="red == index?'red':''" class="zhonlei"
							v-for="(item,index) in skuListList" :key="item.id">
							<view class="yangpin" v-for="(i,index) in item.spData" :key="index">
								{{i.key}}---{{i.value}} ;
							</view>
						</view>
					</view>

				</view>
				<view class="goodsFuWu">
					特色服务
					<view class="tese">
						送货上门
					</view>
					<view class="tese">
						上门安装
					</view>
				</view>
				<view class="goodsShuLiang">

					<view class="lefts">
						购买数量
					</view>
					<view class="rights">
						<view class="jian" @click="jian">
							-
						</view>
						<view class="sun">
							{{shuliangZonHe}}
						</view>
						<view class="jia" @click="jia">
							+
						</view>
					</view>
				</view>
				<!-- 确定按钮 -->
				<button type="default" @click="certain" class="queding">确 定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dingdan
	} from '@/api/dingdan/dingdan.js'
	import {
		append
	} from '@/api/cart/cart.js'
	import {
		goodsList
	} from '@/api/goods/goods.js'
	export default {
		data() {
			return {
				// 遮罩层的状态
				shoMoke: false,
				// 收藏状态  
				sho: false,
				// 产品样式选中状态
				red: 0,
				// 产品样式的 ID
				productSkuId: '',
				// 商品库存
				shoNum: 0,
				id: '',
				// 购买数量总和
				shuliangZonHe: 0,
				goodList: {},
				skuListList: [],
				obj: {
					img: 'width:100%;'
				},
				// 确定按钮的状态
				cunter: ''
			};
		},
		computed: {

		},
		methods: {
			// 调用商品信息接口
			init() {
				goodsList(this.id).then(res => {
					console.log(res)
					console.log(res.data.success)
					if (res.data.success) {
						this.goodList = res.data.data.product

						var arr = []
						this.goodList.skuList.forEach(el => {
							// arr.push(JSON.parse(el.spData))
							arr.push({
								spData: JSON.parse(el.spData),
								id: Math.random() * 10
							})
						})
						this.skuListList = arr
						console.log(this.goodList)
						console.log(this.skuListList)
						uni.setNavigationBarTitle({
							title: this.goodList.name,
						})
						this.shoNum = this.goodList.skuList[0].stock
					}
				})
			},
			//点击返回上一页
			yun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 点击收藏按钮
			shoucang() {
				var result = uni.getStorageSync("token");
				// // console.log(result)
				if (result) {
					// 收藏步骤

					//  提取收藏的数组，有的话就添加，没得话就创建
					const showCleakedList = uni.getStorageSync('showCleaked')
					//  1）先判断有没有收藏过，
					if (!showCleakedList) {
						// 没有收藏的 那个数组（showCleakedList），就添加进去
						uni.setStorageSync('showCleaked', [this.id])
						this.sho = true
					} else {
						// 有收藏的那个数组 （showCleakedList） 就根据 存进了的 id 来在数组里吗遍历， 有的话就取消收藏，没有的话就添加收藏
						var items = showCleakedList.find(ele => ele == this.id)
						// 找到对应下标
						var index = showCleakedList.findIndex(ele => ele == this.id)
						if (items) {
							this.sho = false
							// 存储过  删除
							showCleakedList.splice(index, 1)
						} else {
							this.sho = true
							// 没存储过  添加
							showCleakedList.push(this.id)

						}
						// 再把修改后的值 重新 存进数组里
						uni.setStorageSync('showCleaked', showCleakedList)
					}
				} else {
					uni.showModal({
						title: '登录提示',
						content: "暂未登录，是否立即登录",
						success(res) {
							console.log(res)
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}
			},
			// 点击遮罩层就关闭遮罩层
			guanbi() {
				this.shoMoke = false
			},
			// 点击添加到购物车  点击立即购买
			tianjia(index) {
				this.shoMoke = true
				this.cunter = index
			},
			// 点击确定按钮
			certain() {
				if (this.cunter == 1) {
					// 添加购物车
					append({
						"productId": this.id,
						"productSkuId": this.productSkuId,
						"quantity": this.shuliangZonHe
					}).then(res => {
						if (res.data.success == true) {
							uni.showToast({
								title: '添加成功',
								duration: 2000
							})
						} else if (res.data.success == false) {
							uni.showToast({
								title: '库存不足',
								duration: 2000,
								icon: 'none'
							})
						}
					})
				} else if (this.cunter == 2) {
					// 立即购买
					dingdan({
						"orderItemList": [{
							"productId": this.id,
							"productQuantity": this.shuliangZonHe,
							"productSkuId": this.productSkuId
						}]
					}).then(res => {
						if(res.data.success){
							uni.showToast({
								title:'购买成功',
								duration:1500,
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:`/pages/dingdan/dingdan?id=${res.data.data.orderId}`
								})
							},2000)
						} else{
							uni.showToast({
								title:'购买失败库存不足',
								duration:1500,
								icon:"none"
							})
						}
					})
				}
			},
			//  点击商品选中
			picture(id) {
				// 把传进来的 id 的所在数组的下标拿到
				var arr = this.skuListList.find(ele => ele.id == id)
				var abb = this.skuListList.findIndex(ele => ele.id == id)
				// console.log(arr)
				// console.log(abb)
				// console.log(this.goodList.skuList.length)
				// 根据下表 再去循环数组，把下标对应的数组数据拿出
				this.goodList.skuList.some((item, index) => {
					if (index === abb) {
						// console.log(index)
						this.red = index
						this.shoNum = item.stock
						this.productSkuId = item.id
						console.log(item.stock)
						console.log(item.id)
						return true
					}
				})
			},
			// 点击 加号
			jia() {
				this.shuliangZonHe = this.shuliangZonHe + 1
			},
			// 点击 减号
			jian() {
				if (this.shuliangZonHe - 1 === 0) return
				this.shuliangZonHe = this.shuliangZonHe - 1
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.id = options.id
			
			this.init()

			//  判断有没有收藏的数组，
			const showCleakedList = uni.getStorageSync('showCleaked')
			//  1）先判断有没有收藏过，
			if (!showCleakedList) {
				this.sho = false
			} else {
				var items = showCleakedList.find(ele => ele == this.id)
				if (items) {
					// 存在
					this.sho = true
				} else {
					// 不存在
					this.sho = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.goods {
		background-color: #f4e8ab;
		height: 100vh;
		position: relative;

		// 头部固定位置
		.titlesHead {
			height: 100rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			color: white;
			display: flex;
			align-items: center;
			background-color: #135a05;
			z-index: 999;

			.icon {
				flex: 1;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.titname {
				flex: 3;
				text-align: center;
			}

			.titRight {
				flex: 1;
			}
		}

		// 头部固定后面占位置的盒子，不要删除哈
		.zhanwei {
			width: 100%;
			height: 100rpx;
			background-color: #135a05;
		}

		// 轮播图
		.swiper {
			width: 100%;
			height: 417rpx;

			.swiperItem {
				width: 100%;
				height: 417rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 收藏按钮
		.shoucang {
			position: absolute;
			right: 100rpx;
			top: 450rpx;
			width: 120rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			border-radius: 50%;
			background-color: #354e44;
			z-index: 50;

			.icon {
				font-size: 80rpx;
				color: #fff;
			}

			.red {
				color: red;
			}
		}

		// 产品价格
		.pricrss {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;

			.titller {
				display: flex;
				align-items: center;

				.price {
					color: red;
					font-weight: 700;

					strong {
						font-size: 60rpx;
						font-weight: 900;
					}
				}

				.konbai {
					width: 20rpx;
					margin-top: 20rpx;
				}

				.note {
					margin-top: 20rpx;
					padding: 5rpx;
					font-size: 12rpx;
					color: #fff;
					background-color: red;
				}
			}

			.namess {
				margin: 20rpx 0;
				font-weight: 900;
			}

			.description {
				font-size: 12rpx;
				color: #5d5d5d;
			}
		}

		// 产品详情展示
		.shelft {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			// img{
			// 	width: 100%;
			// }

		}

		.wizhi {
			width: 100%;
			height: 120rpx;
		}

		// 底部固定
		.base {
			width: 100%;
			height: 120rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 10rpx 40rpx;
			box-sizing: border-box;
			background-color: #fdfdfd;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.kefu {
				flex: 2;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.cart {
				flex: 5;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.wen {
					height: 100%;
					padding: 20rpx;
					font-size: 35rpx;
					color: #000000;
					background-color: #cfcfcf;
				}

				.two {
					background-color: #354e44;
					color: #fff;
				}
			}
		}

		// 遮罩层
		.moke {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
			background-color: rgba(0, 0, 0, .6);

			.mokeBox {
				width: 80%;
				height: 65%;
				padding: 30rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				background-color: #fff;

				// 商品图片
				.goodsName {
					display: flex;
					justify-content: flex-start;
					margin-bottom: -110rpx;

					.img {
						width: 192rpx;
						height: 192rpx;
						margin: 20rpx;
						transform: translateY(-120rpx);

						image {
							width: 100%;
							height: 100%;
						}
					}

					.shonamesed {
						.shang {
							font-weight: 900;
							margin-bottom: 5rpx;
						}

						.xia {
							font-size: 26rpx;
						}
					}
				}

				// 商品选择
				.goodsXuanZhe {
					font-weight: 900;

					.box {
						width: 100%;
						height: 130rpx;
						overflow: auto;

						.red {
							border: 4rpx solid red !important;
						}

						.zhonlei {
							display: flex;
							border-color: 4rpx solid transparent;
							// border: 4rpx solid red;
							width: 98%;
							height: 60rpx;
							border-radius: 30rpx;
							margin-bottom: 2rpx;

							background-color: #d8d8d8;

							padding-left: 20rpx;
							box-sizing: border-box;

							.yangpin {
								font-size: 26rpx;
								line-height: 60rpx;

							}

						}

					}
				}

				// 商品服务
				.goodsFuWu {
					margin: 20rpx 0;
					font-weight: 900;

					.tese {
						font-size: 23rpx;
						font-weight: 400;
						line-height: 60rpx;
						margin: 4rpx 0;
						background-color: #d8d8d8;
						border-radius: 30rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}

				// 商品数量
				.goodsShuLiang {
					margin-top: 80rpx;
					font-weight: 900;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.lefts {
						flex: 2;
					}

					.rights {
						flex: 2;
						height: 60rpx;
						text-align: center;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.jia {
							width: 60rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background-color: #c2c1c1;
						}

						.sun {
							width: 90rpx;
							border-radius: 30rpx;
							height: 60rpx;
							background-color: #c2c1c1;
						}

						.jian {
							border-radius: 30rpx;
							width: 60rpx;
							height: 60rpx;
							background-color: #c2c1c1;
						}
					}
				}

				// 确定按钮
				.queding {
					width: 208rpx;
					height: 80rpx;
					margin-top: 100rpx;
					color: #fff;
					background-color: #354e44;
				}
			}
		}
	}
</style>
